<template>
    <div>
        <el-card>
            <div style="display: flex; justify-content: space-between; align-items: center;">
                <div>
                    <i></i>
                    <div>订单详情</div>
                </div>
                <div>
                    <el-button size="mini" plain>返回</el-button>
                </div>
            </div>
        </el-card>
        <!-- 订单详情 -->
        <div style="height: 3px; width: 100%;"></div>
        <el-card>
            <div style="display: flex; align-items: center; height: 70px;">
                <div>订单编号：</div>
                <div>{{ serial[0].serial }}</div>
            </div>
            <div style="width: 100%; height: 2px; background-color: #e5e7ea;  margin-bottom: 8px;"></div>
            <div class="form">
                <div
                    style="background-color: #fff; border-radius: 15px;height: 230px; padding-left: 18px; padding-right: 18px;">
                    <div style="height: 70px;"></div>
                    <el-table :data="listone" border>
                        <el-table-column align="center" prop="freight" width="300">
                            <template slot="header" slot-scope="scope">
                                <span>商品名称</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品属性" align="center" prop="finance" width="200"></el-table-column>
                        <el-table-column label="联系人" align="center" prop="compellation"></el-table-column>
                        <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
                        <el-table-column label="申请金额" align="center" prop="sum"></el-table-column>
                        <el-table-column label="申请期限" align="center" prop="deadline"></el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
        <!-- 订单编号以及表格 -->
        <div style="width: 100%;background-color: #ffffff;">
            <div style="width: 98.3%; height: 2px; background-color:#e5e7ea;  margin: 20px 0 30px 10px"></div>
            <!-- 分割线 -->
            <div class="dots-container"></div>
            <div>
                <div style="display: flex; align-items: center; height: 50px;">
                    <span
                        style=" margin: 0 15px 0 15px; display: inline-block; width: 5px; height: 25px; background-color: #2a87ff; border-radius: 5px;"></span>
                    <div>申请材料</div>
                </div>
                <div style="display: flex;">
                    <div class="applyfor" style="margin-left: 50px;">
                        <el-image>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="applyfor" style="margin-left: 20px;">
                        <el-image>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                    <div class="applyfor" style="margin-left: 20px;">
                        <el-image>
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </div>

            </div>
            <!--申请材料  -->
            <div>
                <div style="display: flex; align-items: center; height: 50px;">
                    <span
                        style=" margin: 0 15px 0 15px; display: inline-block; width: 5px; height: 25px; background-color: #2a87ff; border-radius: 5px;"></span>
                    <div>申请人信息</div>
                </div>
                <div style="display: flex; margin-left: 50px;">
                    <div>
                        <span>公&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 司：</span>
                        <span>天津产权交易中心有限公司</span>
                    </div>
                </div>
                <div style="display: flex; margin: 20px 0 20px 50px;">
                    <div>
                        <span>社会信用代码：</span>
                        <span>91131100MA07K5BX6</span>
                    </div>
                </div>
                <div style="display: flex; margin-left: 50px;">
                    <div>
                        <span>公&nbsp; 司 &nbsp;地 &nbsp;址&nbsp;：</span>
                        <span>天津市河西区琼州道</span>
                    </div>
                </div>
                <!-- 申请人信息 -->
            </div>
            <!-- 申请人 -->
            <div
                style="width: 100%; height: 492px; background-color:#e5e7ea; display: flex;justify-content: center; align-items: center;">
                <div style="width: 97%; height: 472px; background-color: #ffffff; border-radius: 10px;">
                    <div style="display: flex; align-items: center; height: 50px;">
                        <span
                            style=" margin: 0 15px 0 0; display: inline-block; width: 5px; height: 25px; background-color: #2a87ff; border-radius: 5px;"></span>
                        <div>备注</div>
                    </div>
                    <div style="margin-left: 23px; width: 900px;">
                        <el-input type="textarea" placeholder="请输入内容" rows="10"></el-input>
                    </div>
                    <!-- 输入框 -->
                    <div>
                        <div style="margin-top: 20px; margin-left: 21px;">
                            <span style="display: inline-block; margin-right: 10px;">附件上传</span>
                            <span> 目前只支持jpeg,png jpg格式文件</span>
                        </div>
                        <div style="display: flex; width: 347px; height: 140px; justify-content: center; margin-top: 10px;">
                            <el-upload class="avatar-uploader" list-type="picture-card" action="#">
                                <img v-if="imageUrl">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </div>
                    <!-- 文件上传 -->
                </div>

            </div>
            <!-- 备注 -->
        </div>
        <div style="height: 200px; display: flex;justify-content: end; ">
            <div style="margin: 20px 20px 0 0">
                <el-form label-width="100px">
                    <el-form-item label="成交金额：">
                        <el-input style="width: 119px;">
                        </el-input>
                        <span style="display: inline-block;margin-left: 10px;">万元</span>
                    </el-form-item>
                    <el-form-item label="利率：">
                        <el-input style="width: 119px;"></el-input>
                    </el-form-item>
                </el-form>
                <div style="display: flex;justify-content: end; margin-right: 10px;">
                    <el-button type="primary">订单确认</el-button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    data() {
        return {
            imageUrl: '',
            serial: {},
            listone: []
        }
    },
    computed: {
        ...mapState("app", { list: state => state.list })
    },
    created() {
        this.serial = { ...this.list }
        // console.log(this.serial, '表格数据');
        this.listone = [...this.list.slice(0, 1)]
        // console.log(this.listone, '表格数据');

    }
}
</script>

<style lang="less" scoped>
.form {
    padding: 15px 25px 7px 15px;
    background-color: #f8f9fb;
}

/deep/.el-card__body {
    padding: 10px;
}

/deep/.el-table--border .el-table__cell {
    border-right: none;
}

.dots-container {
    width: 98.3%;
    height: 2px;
    margin: 20px 0 30px 10px; // transform: translateX(146px) translateY(-38px);
    background: radial-gradient(#d9d9d9, #d9d9d9 4px, transparent 4px, transparent);
    background-size: 15px 100%;
}

.applyfor {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 134px;
    height: 134px;
    border: 1px solid #e5e7ea;
    border-radius: 10px;
}</style>